<div class="modal-header">
  <div class="modal-title">查看 {{ i.refundOrderNumber }} 信息</div>
</div>
<nz-spin *ngIf="!i" class="modal-spin"></nz-spin>
<div *ngIf="detail">
  <div sv-container>
    <sv-title>基本信息</sv-title>
    <sv label="退供单号">{{ detail['returnOrderNumber'] }}</sv>
    <sv label="发货仓库">{{ detail['warehouseName'] }}</sv>
    <sv label="收货地址">{{ detail['returnAddress'] }}</sv>
    <sv label="创建时间">{{ detail['createdAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</sv>
    <sv label="仓库处理完成时间">
      <span *ngIf="detail['shippedAt'] > 0">{{ detail['shippedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</span>
      <span *ngIf="detail['shippedAt'] <= 0">--</span>
    </sv>
    <sv label="完结时间">
      <span *ngIf="detail['receivedAt'] > 0">{{ detail['receivedAt'] | _date: 'yyyy-MM-dd HH:mm:ss' }}</span>
      <span *ngIf="detail['receivedAt'] <= 0">--</span>
    </sv>
  </div>
  <nz-space></nz-space>
  <div sv-container>
    <sv-title>物流信息</sv-title>
    <sv label="退货方式">{{ detail['shipmentType'] }}发货</sv>
  </div>
  <nz-table #expressTable [nzData]="detail['merchantPackageList']" [nzShowPagination]="false">
    <thead>
      <tr>
        <th class="text-center">物流公司</th>
        <th class="text-center">物流单号</th>
        <th class="text-center">包裹重量</th>
        <th class="text-center">包裹费用</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of expressTable.data">
        <td class="text-center">{{ data['logisticsCompany'] }}</td>
        <td class="text-center">{{ data['trackingNo'] }}</td>
        <td class="text-center">{{ data['packageWeight'] }}</td>
        <td class="text-center">{{ data['logisticsFeeCur'] }} {{ data['logisticsFee'] }} (CNY:{{ data['logisticsFeeCNY'] }})</td>
      </tr>
    </tbody>
  </nz-table>

  <nz-space></nz-space>
  <div sv-container>
    <sv-title>商品信息</sv-title>
    <sv>共{{ detail['returnOrderSkuList'].length }}件商品</sv>
  </div>

  <nz-table #wareTable [nzData]="detail['returnOrderSkuList']" [nzShowPagination]="false">
    <thead>
      <tr>
        <th class="text-center">商品</th>
        <th class="text-center">商品ID</th>
        <th class="text-center">商品货号</th>
        <th class="text-center">商家SKU</th>
        <th class="text-center">异常类型</th>
        <th class="text-center">退供数量</th>
        <th class="text-center">实发数量</th>
        <th class="text-center">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let data of wareTable.data">
        <td>
          <nz-comment>
            <nz-comment-content>
              <ng-container>
                <nz-image
                  [nzWidth]="80"
                  [nzHeight]="80"
                  style="float: left; padding-right: 10px"
                  nzSrc="{{ data['skuImageUrl'] }}"
                ></nz-image>
                <p>{{ data['itemName'] }}</p>
                <p>{{ data['skuAttribute'] }}</p>
                <p>Fordeal SKU: {{ data['skuId'] }}</p>
                <p>商家SKU: {{ data['skuNo'] }}</p>
              </ng-container>
            </nz-comment-content>
          </nz-comment>
        </td>
        <td class="text-center">{{ data['itemId'] }}</td>
        <td class="text-center">{{ data['itemNo'] }}</td>
        <td class="text-center">{{ data['skuNo'] }}</td>
        <td class="text-center">{{ data['exceptionType'] }}</td>
        <td class="text-center">{{ data['totalQuantity'] }}</td>
        <td class="text-center">{{ data['appliedQuantity'] }}</td>
        <td class="text-center">
          <a>查看图片</a>
        </td>
      </tr>
    </tbody>
  </nz-table>
</div>

<div class="modal-footer">
  <button nz-button type="button" (click)="close()">关闭</button>
</div>
